import React, { useState } from 'react';
import ProTable from '/@/components/proTable';
import type { ProColumnsType, ProTableRequest } from '/@/components/proTable/type';
import Icon from '/@/components/icon';
// @ts-ignore
// @ts-ignore
// @ts-ignore
import {
  Button,
  DatePicker,
  Modal,
  Drawer,
  Cascader,
  Form,
  Input,
  InputNumber,
  Radio,
  Select,
  Switch,
  TreeSelect,
  Space,
  Col,
  Row,
} from 'antd';
import axios from 'axios';
import moment from 'moment';
const { RangePicker } = DatePicker;
const { Option } = Select;
interface DataType {
  name: string;
  number: number;
  title: string;
  created_at: number;
  key: React.Key;
}
type SizeType = Parameters<typeof Form>[0]['size'];

export default function index() {
  const columns: ProColumnsType<DataType> = [
    {
      title: '编号',
      dataIndex: 'id',
      hideInSearch: false,
      initialValue: '请输入编号',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
        ],
        tooltip: '此项必填',
      },
    },
    {
      title: '用户昵称',
      dataIndex: 'user',
      hideInSearch: true,
    },
    {
      title: 'number',
      dataIndex: 'number',
      hideInSearch: true,
    },
    {
      title: '标题',
      dataIndex: 'title',
      initialValue: '此项必填',
      copyable: true,
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
        ],
        tooltip: '此项必填',
      },
      ellipsis: {
        showTitle: true,
      },
    },
    {
      title: '时间筛选',
      dataIndex: 'time',
      renderFormItem() {
        return <RangePicker></RangePicker>;
      },
      search: {
        //时间转换
        transform: (value) => {
          return {
            starTime: value[0],
            endTime: value[1],
          };
        },
      },
      hideInTable: true,
    },
    {
      title: '开始时间',
      dataIndex: 'created_at',
      search: false,
      hideInSearch: true,
      sorter: (a, b) => a.created_at - b.created_at,
      render: (text) => moment(text).local().format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      title: '结束时间',
      dataIndex: 'updated_at',
      hideInSearch: true,
      sorter: (a, b) => a.created_at - b.created_at,
      render: (text) => moment(text).local().format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      title: () => {
        return (
          <>
            <span>操作</span>
            <span style={{ float: 'right' }}>
              <Icon icon='SettingOutlined'></Icon>
            </span>
          </>
        );
      },
      valueType: 'option',
      // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
      render: (text, record, index) => {
        return [
          <Button key='1' type='primary' size='small' style={{ marginRight: '10px' }}>
            编辑
          </Button>,
          <Button key='2' type='primary' danger size='small'>
            删除
          </Button>,
        ];
      },
      fixed: 'right',
      width: 150,
    },
  ];

  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
  const httpRequest: ProTableRequest<DataType> = async (params, filters, sorter) => {
    const res = await axios.get('https://proapi.azurewebsites.net/github/issues', {
      params,
    });
    return res.data;
  };
  // 对话框
  const [open, setOpen] = useState(false);
  const [modalTitle] = useState('我只是一个小小的对话框');
  const showModal = () => {
    setOpen(true);
  };
  const handleOk = () => {
    setOpen(true);
  };
  const handleCancel = () => {
    setOpen(false);
  };
  //抽屉
  const [isShowDrawer, setDrawer] = useState(false);
  const [drawerTitle] = useState('我只是一个小抽屉');
  const closeDrawer = () => {
    setDrawer(false);
  };
  const openDrawer = () => {
    setDrawer(true);
  };
  const [componentSize, setComponentSize] = useState<SizeType | 'default'>('default');

  const onFormLayoutChange = ({ size }: { size: SizeType }) => {
    setComponentSize(size);
  };
  return (
    <div>
      <Modal title={modalTitle} open={open} onOk={handleOk} onCancel={handleCancel}>
        <Form
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 14 }}
          layout='horizontal'
          initialValues={{ size: componentSize }}
          onValuesChange={onFormLayoutChange}
          size={componentSize as SizeType}
        >
          <Form.Item label='Form Size' name='size'>
            <Radio.Group>
              <Radio.Button value='small'>Small</Radio.Button>
              <Radio.Button value='default'>Default</Radio.Button>
              <Radio.Button value='large'>Large</Radio.Button>
            </Radio.Group>
          </Form.Item>
          <Form.Item label='Input'>
            <Input />
          </Form.Item>
          <Form.Item label='Select'>
            <Select>
              <Select.Option value='demo'>Demo</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item label='TreeSelect'>
            <TreeSelect
              treeData={[{ title: 'Light', value: 'light', children: [{ title: 'Bamboo', value: 'bamboo' }] }]}
            />
          </Form.Item>
          <Form.Item label='Cascader'>
            <Cascader
              options={[
                {
                  value: 'zhejiang',
                  label: 'Zhejiang',
                  children: [
                    {
                      value: 'hangzhou',
                      label: 'Hangzhou',
                    },
                  ],
                },
              ]}
            />
          </Form.Item>
          <Form.Item label='DatePicker'>
            <DatePicker />
          </Form.Item>
          <Form.Item label='InputNumber'>
            <InputNumber />
          </Form.Item>
          <Form.Item label='Switch' valuePropName='checked'>
            <Switch />
          </Form.Item>
        </Form>
      </Modal>
      <Drawer
        title={drawerTitle}
        placement='right'
        closable={false}
        width={720}
        bodyStyle={{ paddingLeft: 80 }}
        onClose={closeDrawer}
        open={isShowDrawer}
        extra={
          <Space>
            <Icon icon='CloseOutlined' onClick={closeDrawer} />
          </Space>
        }
      >
        <Form layout='vertical' hideRequiredMark className='px-10px mt-10px'>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item name='name' label='Name' rules={[{ required: true, message: 'Please enter user name' }]}>
                <Input placeholder='Please enter user name' />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name='url' label='Url' rules={[{ required: true, message: 'Please enter url' }]}>
                <Input
                  style={{ width: '100%' }}
                  addonBefore='http://'
                  addonAfter='.com'
                  placeholder='Please enter url'
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item name='owner' label='Owner' rules={[{ required: true, message: 'Please select an owner' }]}>
                <Select placeholder='Please select an owner'>
                  <Option value='xiao'>Xiaoxiao Fu</Option>
                  <Option value='mao'>Maomao Zhou</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name='type' label='Type' rules={[{ required: true, message: 'Please choose the type' }]}>
                <Select placeholder='Please choose the type'>
                  <Option value='private'>Private</Option>
                  <Option value='public'>Public</Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                name='approver'
                label='Approver'
                rules={[{ required: true, message: 'Please choose the approver' }]}
              >
                <Select placeholder='Please choose the approver'>
                  <Option value='jack'>Jack Ma</Option>
                  <Option value='tom'>Tom Liu</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name='dateTime'
                label='DateTime'
                rules={[{ required: true, message: 'Please choose the dateTime' }]}
              >
                <DatePicker.RangePicker
                  style={{ width: '100%' }}
                  getPopupContainer={(trigger) => trigger.parentElement!}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={24}>
              <Form.Item
                name='description'
                label='Description'
                rules={[
                  {
                    required: true,
                    message: 'please enter url description',
                  },
                ]}
              >
                <Input.TextArea rows={4} placeholder='please enter url description' />
              </Form.Item>
            </Col>
          </Row>
        </Form>
        <div className='fixed bottom-40px right-20px'>
          <Button type='default' key='new' onClick={closeDrawer}>
            取消
          </Button>
          ,
          <Button type='primary' key='new' className='ml-12px' onClick={closeDrawer}>
            确定
          </Button>
        </div>
      </Drawer>
      <ProTable
        columns={columns as any}
        request={httpRequest}
        pagination={{
          pageSize: 10,
          current: 1,
          position: ['bottomRight'],
        }}
        rowKey='id'
        headerTitle='测试表格'
        scroll={{
          x: 1600,
        }}
        toolBarRender={() => {
          return [
            <Button type='primary' key='new' onClick={showModal}>
              对话框
            </Button>,
            <Button type='primary' key='new' onClick={openDrawer}>
              抽屉
            </Button>,
          ];
        }}
      ></ProTable>
    </div>
  );
}
